<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" destroy-on-close @closed="close" :close-on-click-modal="false" :close-on-press-escape="mode != 'show' ? false : true" fullscreen>
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" label-width="130" ref="dialogForm">
            <el-row :gutter="1">
                <el-col :span="12">
                    <el-form-item label="客户" prop="customer_id">
                        <el-input v-model="customer_name" placeholder="请选择客户" readonly @click="checkCustomer"></el-input>
				</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="日期" prop="contract_date">
					<el-date-picker v-model="form.contract_date" type="date" placeholder="请选择日期" :value-format="'YYYY-MM-DD'" style="width:100%" @change="updateFields" />
				</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="类型" prop="contract_type">
					<el-select v-model="form.contract_type" placeholder="请选择" @change="type_change">
						<el-option label="码数" :value="1" v-column="'sale.code_number'"></el-option>
						<el-option label="米数" :value="2" v-column="'sale.meter_number'"></el-option>
					</el-select>
				</el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="6">
                    <el-form-item label="联系人" prop="contacts">
                        <el-input v-model="form.contacts" placeholder="联系人" clearable @blur="updateFields"></el-input>
				</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="联系方式" prop="mobile">
                        <el-input v-model="form.mobile" placeholder="联系方式" clearable @blur="updateFields"></el-input>
				</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="form.remark" placeholder="备注" clearable @blur="updateFields" type="textarea"></el-input>
				</el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="12">
                    <el-form-item label="地址" prop="address">
                        <el-input v-model="form.address" placeholder="地址" clearable @blur="updateFields"></el-input>
				</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="本单运费" prop="shipping_price">
                        <el-input v-model="form.shipping_price" placeholder="本单运费" clearable @blur="updateFields" @input="total"></el-input>
				</el-form-item>
                </el-col>
            </el-row>
            <div class="flex">
                <div>
                    <span>新增</span>
                    <div style="display: flex;align-items: center;">
                        <el-input v-model="bar_code" ref="barCodeInput" placeholder="放入条码" style="width: 200px" @keyup.enter="getTable($event)" :readonly="!form.customer_id"></el-input>
                        <el-tooltip content="录入条码需要先行选择客户" placement="top" width="200">
                            <el-icon style="margin-left: 10px;" size="16"><el-icon-InfoFilled /></el-icon>
                        </el-tooltip>
                        <span style="margin-left: 10px;">总匹数: {{form.total_count}}</span>
                        <span style="margin-left: 10px;">{{form.contract_type == 1 ? '总码数' : '总米数'}}: {{form.total_meters}}</span>
                        <span style="margin-left: 10px;">本单总金额: {{form.contract_price}}</span>
                        <span style="margin-left: 10px;">账号结余: {{balance}}</span>
                    </div>
                </div>
                <div style="display: flex;align-items: center;">
                    <el-button type="danger" size="small" @click="delTable">批量删除</el-button>
                    <div style="margin-left: 10px;">
                        <span>删除</span>
                        <el-input v-model="remove_bar_code" ref="removeBarCodeInput" placeholder="放入条码" @keyup.enter="removeCode"></el-input>
                    </div>
                </div>
            </div>
            <!-- 使用虚拟表格实现 -->
            <el-table-v2 :columns="columns" :data="form.detail" :width="1700" :height="600" @select-change="handleSelectChange" />
        </el-form>
    </el-dialog>
    <client-list v-if="dialog.client" ref="clientDialog" @success="clientBack" @closed="dialog.client=false"></client-list>
    <price-save v-if="dialog.price" ref="priceDialog" @success="priceBack" @closed="dialog.price=false"></price-save>
</template>

<script>
import clientList from '@/views/basic/client/clientList.vue';
import PriceSave from './priceSave.vue';

import config from '@/config'
export default {
    components: { clientList, PriceSave,  },
    emits: [
        'success', 'closed'],
    data() {
        return {
            mode: "add",
            titleMap: {
                add: '新增销售单',
                edit: '编辑销售单',
                show: '查看销售单',
            },
            visible: false,
            isSaveing: false,
            dialog: {
                client: false,
            },
            form: {
                id: "",
                detail: [],
                customer_id: "",
                contract_date: this.moment().format("YYYY-MM-DD"),
                contacts: "",
                mobile: "",
                address: "",
                shipping_price: "",
                remark: "",
                contract_price: 0,
                total_count: 0,
                total_meters: 0,
                contract_type: 1,
            },
            customer_name: "",
            balance: "",
            bar_code: "",
            remove_bar_code: "",
            // MusicYes: new Audio(`${config.API_URL}//audio/ok.wav`),
            // MusicNo: new Audio(`${config.API_URL}/audio/error.wav`),
            table_index: 0,
            // 虚拟表格列配置
            columns: [
                {
                    key: 'selection',
                    width: 50,
                    cellRenderer: ({ rowData }) => (
                        <el-checkbox 
                            v-model={rowData.selected} 
                            onChange={() => this.handleSelectChange(rowData)}
                        />
                    ),
                    headerRenderer: () => (
                        <el-checkbox
                            v-model={this.isAllSelected}
                            indeterminate={this.isIndeterminate}
                            onChange={this.handleSelectAll}
                        />
                    )
                },
                {
                    title: '序号',
                    dataKey: 'index',
                    width: 80,
                    align: 'center'
                },
                {
                    title: '布卷条码',
                    dataKey: 'roll_code',
                    width: 180,
                    align: 'center'
                },
                {
                    title: '品名',
                    dataKey: 'goods_name',
                    width: 180,
                    align: 'center'
                },
                {
                    title: '货号(销售价)',
                    dataKey: 'goods_code',
                    width: 150,
                    align: 'center',
                    cellRenderer: ({ rowData }) => {
                        return <div onClick={() => this.price(rowData, '货号')} style="cursor: pointer;">{rowData.goods_code}</div>
                    }
                },
                {
                    title: '花型(销售价)',
                    dataKey: 'flower',
                    width: 180,
                    align: 'center',
                    cellRenderer: ({ rowData }) => {
                        return <div onClick={() => this.price(rowData, '销售价')} style="cursor: pointer;">{rowData.flower}</div>
                    }
                },
                {
                    title: '颜色',
                    dataKey: 'color',
                    width: 150,
                    align: 'center'
                },
                {
                    title: 'Color',
                    dataKey: 'colorName',
                    width: 150,
                    align: 'center'
                },
                {
                    title: '码数',
                    dataKey: 'code_number',
                    width: 100,
                    align: 'center'
                },
                {
                    title: '折码',
                    dataKey: 'folding',
                    width: 100,
                    align: 'center'
                },
                {
                    title: '销售价',
                    dataKey: 'sales_price',
                    width: 120,
                    align: 'center',
                    cellRenderer: ({ rowData }) => {
                        return (
                            <el-input 
                                v-model={rowData.sales_price} 
                                placeholder="销售价" 
                                clearable 
                                onFocus={(e) => this.common.inputFocus(e)}
                                onBlur={() => this.price_edit(rowData)}
                            />
                        )
                    }
                },
                {
                    title: '单匹总金额',
                    dataKey: 'total_price',
                    width: 120,
                    align: 'center'
                },
                {
                    title: '操作',
                    dataKey: 'operation',
                    width: 120,
                    align: 'center',
                    cellRenderer: ({ rowData }) => {
                        return (
                            <el-button 
                                type="danger" 
                                size="small"
                                onClick={() => this.delRow(rowData)}
                            > 删除
                            </el-button>
                        )
                    }
                },
                {
                    title: '指导价',
                    dataKey: 'zd_price',
                    width: 100,
                    align: 'center'
                },
                {
                    title: '运输成本',
                    dataKey: 'shipping_cost',
                    width: 100,
                    align: 'center'
                }
            ],
            isAllSelected: false,
            isIndeterminate: false,
        }
    },
    mounted() {
    },
    created() {
        this.timeInput = this.common.debounce(this.timeInput, 5000);
        // this.getTable = this.common.debounce(this.getTable, 500);
        // this.removeCode = this.common.debounce(this.removeCode, 500);
	},
    methods: {
        handleSelectChange(rowData) {
            // 更新全选状态
            const selectedCount = this.form.detail.filter(item => item.selected).length;
            this.isAllSelected = selectedCount === this.form.detail.length;
            this.isIndeterminate = selectedCount > 0 && selectedCount < this.form.detail.length;
            
            // 触发选择事件
            this.$emit('select-change', {
                row: rowData,
                selected: rowData.selected,
                selectedRows: this.form.detail.filter(item => item.selected)
            });
        },
        
        // 批量删除选中的数据行
        async delTable() {
            // 获取所有选中的行
            const selectedRows = this.form.detail.filter(item => item.selected);
            if (selectedRows.length === 0) {
                this.$message.warning('请先选择要删除的数据');
                return;
            }
            try {
                // 显示确认对话框
                await this.$confirm(`确定要删除选中的 ${selectedRows.length} 条数据吗？`, '确认删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                });
                // 执行删除操作
                // 1. 从数据中移除选中的行
                this.form.detail = this.form.detail.filter(item => !item.selected);
                // 2. 重置全选状态
                this.isAllSelected = false;
                this.isIndeterminate = false;
                // 3. 重新计算序号
                if (this.form.detail.length > 0) {
                    // 按原始索引排序，确保序号连续
                    const sortedItems = [...this.form.detail].sort((a, b) => a.index - b.index);
                    this.form.detail.forEach((item, idx) => {
                        // 查找当前项在排序后的位置
                        const sortedIndex = sortedItems.findIndex(sortedItem => sortedItem.roll_code === item.roll_code);
                        item.index = sortedIndex !== -1 ? sortedIndex + 1 : idx + 1;
                    });
                    this.table_index = Math.max(...this.form.detail.map(item => item.index));
                } else {
                    this.table_index = 0;
                }
                // 4. 更新合计数据
                this.form.total_count = this.form.detail.length;

                // this.total();
                // 5. 播放成功提示音
                const successAudio = new Audio(`${config.API_URL}//audio/ok.wav`);
                successAudio.play();
                this.$message.success('删除成功');
                // 触发选择变化事件，通知外部组件
                this.$emit('select-change', {
                    selectedRows: []
                });
            } catch (error) {
                // 用户取消删除
                if (error !== 'cancel') {
                    this.$message.error('删除失败');
                }
            }
        },
        timeInput(){
            this.setData({id: this.form.id})
        },
        close() {
            this.$emit('closed')
            this.submit()
        },
        //显示
        open(mode = 'add') {
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单提交方法
        async submit() {
            if(!this.form.customer_id) return
            if(this.mode == 'show') return
            this.form.total_count = this.form.detail.length
            // var res = [];
            // if (this.form.id) {
            //     res = await this.$API.business.sale.edit.post(this.form);
            // } else {
            //     res = await this.$API.business.sale.add.post(this.form);
            // }
            if (this.form.id) {
                this.$emit('success', this.form, this.mode)
            } else {
                var res = await this.$API.business.sale.add.post(this.form);
                if (res.code == 1) {
                    this.$emit('success', this.form, this.mode)
                    this.form.id = this.form.id?this.form.id:res.data.id
                    // if(this.form.id){
                    //     this.setData({id: this.form.id})
                    // }
                }else {
                    this.$alert(res.message, "提示", {type: 'error'})
                    this.remove_bar_code = this.bar_code
                    this.removeCode()
                }
            }
        },
        //表单注入数据
        async setData(data) {
            this.form.id = data.id
            var res = await this.$API.business.sale.detail.get({id: data.id});
            this.form.customer_id = res.data.customer_id
            this.customer_name = res.data.customer?.customer_name
            this.balance = res.data.customer?.balance
            this.form.contacts = res.data.contacts
            this.form.mobile = res.data.mobile
            this.form.address = res.data.address
            this.form.contract_date = res.data.contract_date
            this.form.shipping_price = res.data.shipping_price
            this.form.remark = res.data.remark
            this.form.contract_price = res.data.contract_price
            this.form.total_count = res.data.total_count
            this.form.total_meters = res.data.total_meters
            this.form.contract_type = res.data.contract_type
            this.table_index = res.data.detail.length
            this.columns = [
                {
                    key: 'selection',
                    width: 50,
                    cellRenderer: ({ rowData }) => (
                        <el-checkbox 
                            v-model={rowData.selected} 
                            onChange={() => this.handleSelectChange(rowData)}
                        />
                    ),
                    headerRenderer: () => (
                        <el-checkbox
                            v-model={this.isAllSelected}
                            indeterminate={this.isIndeterminate}
                            onChange={this.handleSelectAll}
                        />
                    )
                },
                {
                    title: '序号',
                    dataKey: 'index',
                    width: 80,
                    align: 'center'
                },
                {
                    title: '布卷条码',
                    dataKey: 'roll_code',
                    width: 180,
                    align: 'center'
                },
                {
                    title: '品名',
                    dataKey: 'goods_name',
                    width: 180,
                    align: 'center'
                },
                {
                    title: '货号(销售价)',
                    dataKey: 'goods_code',
                    width: 150,
                    align: 'center',
                    cellRenderer: ({ rowData }) => {
                        return <div onClick={() => this.price(rowData, '货号')} style="cursor: pointer;">{rowData.goods_code}</div>
                    }
                },
                {
                    title: '花型(销售价)',
                    dataKey: 'flower',
                    width: 180,
                    align: 'center',
                    cellRenderer: ({ rowData }) => {
                        return <div onClick={() => this.price(rowData, '销售价')} style="cursor: pointer;">{rowData.flower}</div>
                    }
                },
                {
                    title: '颜色',
                    dataKey: 'color',
                    width: 150,
                    align: 'center'
                },
                {
                    title: 'Color',
                    dataKey: 'colorName',
                    width: 150,
                    align: 'center'
                },
                {
                    title: res.data.contract_type == 1 ? '码数' : '米数',
                    dataKey: res.data.contract_type == 1 ? 'code_number' : 'meter',
                    width: 100,
                    align: 'center'
                },
                {
                    title: '折码',
                    dataKey: 'folding',
                    width: 100,
                    align: 'center'
                },
                {
                    title: '销售价',
                    dataKey: 'sales_price',
                    width: 120,
                    align: 'center',
                    cellRenderer: ({ rowData }) => {
                        return (
                            <el-input 
                                v-model={rowData.sales_price} 
                                placeholder="销售价" 
                                clearable 
                                onFocus={(e) => this.common.inputFocus(e)}
                                onBlur={() => this.price_edit(rowData)}
                            />
                        )
                    }
                },
                {
                    title: '单匹总金额',
                    dataKey: 'total_price',
                    width: 120,
                    align: 'center'
                },
                {
                    title: '操作',
                    dataKey: 'operation',
                    width: 120,
                    align: 'center',
                    cellRenderer: ({ rowData }) => {
                        return (
                            <el-button 
                                type="danger" 
                                size="small"
                                onClick={() => this.delRow(rowData)}
                            > 删除
                            </el-button>
                        )
                    }
                },
                {
                    title: '指导价',
                    dataKey: 'zd_price',
                    width: 100,
                    align: 'center'
                },
                {
                    title: '运输成本',
                    dataKey: 'shipping_cost',
                    width: 100,
                    align: 'center'
                }
            ]
            let array = []
            res.data.detail.map(item=>{
                array.push({
                    selected: false,
                    id: item.id,
                    index: item.index,
                    goods_id: item.goods_id,
                    inspect_id: item.inspect_id,
                    roll_code: item.inspect?.roll_code,
                    goods_code: item.inspect?.goods_code,
                    goods_name: item.inspect?.goods_name,
                    number: item.inspect?.number,
                    code_number: item.inspect?.code_number,
                    meter: item.inspect?.meter,
                    folding: item.inspect?.folding?.name,
                    color: item.inspect?.color,
                    colorName: item.inspect?.colorName?.name,
                    flower: item.inspect?.flower,
                    sales_price: item.sales_price,
                    total_price: item.total_price,
                    zd_price: item.zd_price,
                    shipping_cost: item.shipping_cost,

                })
            })
            this.form.detail = array
        },
        // 选择客户
        checkCustomer(){
            this.dialog.client = true;
            this.$nextTick(() => {
                this.$refs.clientDialog.open()
            })
        },
        // 客户返回
        clientBack(data){
            this.form.customer_id = data.id
            this.customer_name = data.customer_name
            this.form.contacts = data.help_remember
            this.form.mobile = data.mobile
            this.form.address = data.address
            this.balance = data.balance
            this.$nextTick(()=>{
                this.$refs.barCodeInput.focus()
            })
            this.submit()
        },
        async getTable(){        
            if(!this.bar_code) return
            var res = await this.$API.business.sale.scan.get({roll_code: this.bar_code,action_type: 1,contract_id: this.form.id})
            if(res.code == 1){
                // 创建新的Audio实例播放成功声音，避免连续播放时相互干扰
                const successAudio = new Audio(`${config.API_URL}//audio/ok.wav`);
                successAudio.play();
                const maxIndex = this.form.detail.length > 0 ? Math.max(...this.form.detail.map(item => item.index)) : 0
                const newIndex = maxIndex + 1
                this.table_index = newIndex
                let array = []
                let form = {
                    selected: false,
                    index: newIndex,
                    inspect_id: res.data.id,
                    roll_code: res.data.roll_code,
                    goods_id: res.data.goods_id,
                    goods_code: res.data.goods_code,
                    goods_name: res.data.goods_name,
                    number: res.data.number,
                    folding: res.data.folding?.name,
                    code_number: res.data.code_number,
                    meter: res.data.meter,
                    color: res.data.color,
                    colorName: res.data.colorName?.name,
                    flower: res.data.flower,
                    sales_price: 0,
                    zd_price: 0,
                    shipping_cost: 0,
                }
                array.push(form)
                this.form.detail = [...array, ...this.form.detail]
                // 重新计算序号
                // this.form.detail.forEach((item, idx) => {
                //     item.index = this.form.detail.length - idx;
                // });
                // this.total()
                this.form.total_count = this.form.detail.length
                this.bar_code = ""
            }else{
                // 创建新的Audio实例播放错误声音，避免连续播放时相互干扰
                const errorAudio = new Audio(`${config.API_URL}/audio/error.wav`);
                errorAudio.play();
                // this.MusicNo.play()
                this.$message.error(res.message)
                this.$refs.barCodeInput.select()
            }
        },
        async removeCode(){
            if(!this.remove_bar_code) return
            var res = await this.$API.business.sale.scan.get({roll_code: this.remove_bar_code,action_type: 2,contract_id: this.form.id})
            if(res.code == 1){
                // 创建新的Audio实例播放成功声音，避免连续播放时相互干扰
                const successAudio = new Audio(`${config.API_URL}//audio/ok.wav`);
                successAudio.play();
                const index = this.form.detail.findIndex(item => item.roll_code == this.remove_bar_code)
                if(index !== -1){
                    this.$message.success("删除成功!")
                    this.form.detail.splice(index, 1)
                    // 添加条件判断，确保索引赋值的正确性
                    if (this.form.detail && this.form.detail.length > 0) {
                        // 先按原始索引排序，再重新赋值连续索引
                        const sortedItems = [...this.form.detail].sort((a, b) => a.index - b.index);
                        this.form.detail.forEach((item, idx) => {
                            // 查找当前项在排序后的位置，确保索引连续
                            const sortedIndex = sortedItems.findIndex(sortedItem => sortedItem.roll_code === item.roll_code);
                            item.index = sortedIndex !== -1 ? sortedIndex + 1 : idx + 1;
                        });
                        this.table_index = Math.max(...this.form.detail.map(item => item.index));
                    } else {
                        this.table_index = 0;
                    }
                    this.$forceUpdate();
                }else {
                    this.$message.error("此条数据不存在!")
                }
                this.remove_bar_code = ""
                this.bar_code = ""
                this.total()
                this.form.total_count = this.form.detail.length
            }else {
                // 创建新的Audio实例播放错误声音，避免连续播放时相互干扰
                const errorAudio = new Audio(`${config.API_URL}/audio/error.wav`);
                errorAudio.play();
                this.$message.error(res.message)
                this.$refs.removeBarCodeInput.select()
            }
        },
        total(){
            let total_price = 0
            let total_code_number = 0
            this.form.detail.map(item=>{
                if(item.sales_price){
                    item.total_price = this.form.contract_type == 1 ? (Number(item.sales_price) * Number(item.code_number)).toFixed(2) : (Number(item.sales_price) * Number(item.meter)).toFixed(2)
                }
                if(item.total_price){
                    total_price = Number(item.total_price) + total_price
                }
                total_code_number = Number(item.code_number) + total_code_number
            })
            this.form.contract_price = (Number(this.form.shipping_price) + (total_price)).toFixed(2)
            this.form.total_meters = (total_code_number).toFixed(2)
            this.updateFields()
        },

        price(row,name){
            const goods_code_array = this.form.detail.filter(item=>item.goods_code == row.goods_code) 
            const flower_array = this.form.detail.filter(item=>item.flower == row.flower) 
            row.flower_length = flower_array.length
            row.goods_code_length = goods_code_array.length
            this.dialog.price = true
            this.$nextTick(() => {
                this.$refs.priceDialog.open('edit').setData(row,name)
            })
        },
        async priceBack(data,name,goods_code,flower){
            let form = {}
            // let total_price = 0
            this.form.detail.forEach(item=>{
                if(name == '销售价' && item.flower == flower){
                    item.sales_price = data.font
                    form = {
                        contract_id: this.form.id,
                        sales_price: data.font,
                        flower: flower,
                    }
                } else if (name == '货号' && item.goods_code == goods_code){
                    item.sales_price = data.font
                    form = {
                        contract_id: this.form.id,
                        sales_price: data.font,
                        goods_code: goods_code,
                    }
                }
                // if(item.total_price){
                //     total_price = Number(item.total_price) + total_price
                // }
                // this.form.contract_price = (Number(this.form.shipping_price) + (total_price)).toFixed(2)
            })
            await this.$API.business.sale.updateFieldsdetail.post(form);
            this.total()
            // setTimeout(()=>{
            //     this.setData({id: this.form.id})
            // },100)
        },


        async updateFields(){
            if(!this.form.customer_id) return
            if(this.mode == 'show') return
            let form = {
                id: this.form.id,
                contract_date: this.form.contract_date,
                contacts: this.form.contacts,
                mobile: this.form.mobile,
                remark: this.form.remark,
                address: this.form.address,
                shipping_price: this.form.shipping_price,
                contract_price: this.form.contract_price,
                total_meters: this.form.total_meters,
                contract_type: this.form.contract_type,
            }
            await this.$API.business.sale.updateFields.post(form);
            const successAudio = new Audio(`${config.API_URL}//audio/ok.wav`);
            successAudio.play();
        },

        async price_edit(row){
            let form = {
                contract_id: this.form.id,
                order_goods_id: row.id,
                sales_price: row.sales_price,
            }
            await this.$API.business.sale.updateFieldsdetail.post(form);
            this.total()
            // this.setData({id: this.form.id})
        },
        type_change(e){
            this.updateFields()
            this.columns = [
                {
                    key: 'selection',
                    width: 50,
                    cellRenderer: ({ rowData }) => (
                        <el-checkbox 
                            v-model={rowData.selected} 
                            onChange={() => this.handleSelectChange(rowData)}
                        />
                    ),
                    headerRenderer: () => (
                        <el-checkbox
                            v-model={this.isAllSelected}
                            indeterminate={this.isIndeterminate}
                            onChange={this.handleSelectAll}
                        />
                    )
                },
                {
                    title: '序号',
                    dataKey: 'index',
                    width: 80,
                    align: 'center'
                },
                {
                    title: '布卷条码',
                    dataKey: 'roll_code',
                    width: 180,
                    align: 'center'
                },
                {
                    title: '品名',
                    dataKey: 'goods_name',
                    width: 180,
                    align: 'center'
                },
                {
                    title: '货号(销售价)',
                    dataKey: 'goods_code',
                    width: 150,
                    align: 'center',
                    cellRenderer: ({ rowData }) => {
                        return <div onClick={() => this.price(rowData, '货号')} style="cursor: pointer;">{rowData.goods_code}</div>
                    }
                },
                {
                    title: '花型(销售价)',
                    dataKey: 'flower',
                    width: 180,
                    align: 'center',
                    cellRenderer: ({ rowData }) => {
                        return <div onClick={() => this.price(rowData, '销售价')} style="cursor: pointer;">{rowData.flower}</div>
                    }
                },
                {
                    title: '颜色',
                    dataKey: 'color',
                    width: 150,
                    align: 'center'
                },
                {
                    title: 'Color',
                    dataKey: 'colorName',
                    width: 150,
                    align: 'center'
                },
                {
                    title: e == 1 ? '码数' : '米数',
                    dataKey: e == 1 ? 'code_number' : 'meter',
                    width: 100,
                    align: 'center'
                },
                {
                    title: '折码',
                    dataKey: 'folding',
                    width: 100,
                    align: 'center'
                },
                {
                    title: '销售价',
                    dataKey: 'sales_price',
                    width: 120,
                    align: 'center',
                    cellRenderer: ({ rowData }) => {
                        return (
                            <el-input 
                                v-model={rowData.sales_price} 
                                placeholder="销售价" 
                                clearable 
                                onFocus={(e) => this.common.inputFocus(e)}
                                onBlur={() => this.price_edit(rowData)}
                            />
                        )
                    }
                },
                {
                    title: '单匹总金额',
                    dataKey: 'total_price',
                    width: 120,
                    align: 'center'
                },
                {
                    title: '操作',
                    dataKey: 'operation',
                    width: 120,
                    align: 'center',
                    cellRenderer: ({ rowData }) => {
                        return (
                            <el-button 
                                type="danger" 
                                size="small"
                                onClick={() => this.delRow(rowData)}
                            > 删除
                            </el-button>
                        )
                    }
                },
                {
                    title: '指导价',
                    dataKey: 'zd_price',
                    width: 100,
                    align: 'center'
                },
                {
                    title: '运输成本',
                    dataKey: 'shipping_cost',
                    width: 100,
                    align: 'center'
                }
            ]
            this.total()
        },
        delRow(row){
            this.remove_bar_code = row.roll_code
            this.removeCode()
        },
    }
}
</script>

<style lang="scss" scoped>
.flex{
    display: flex;
    justify-content: space-between;
}
</style>
